<template name="lingquan">
	<view class="contentbox">
		<view class="header">
			<view class="userinfo flex align-center">
				<view class="padding-lg margin-xs radius" style="position:relative;">
					<image src="../../static/user.png" mode=""></image>
					<button class="cu-btn round sm">领券用户</button>
				</view>
				
				<view class="radius" style="width: 100%;">
					<view style="display:flex;flex-wrap:wrap;">
						<view class="tui" @tap="tologin" style="">
							<text>退出登录</text>
							<image  src="../../static/tuichu.png" mode=""></image>
						</view>
							<text class="username">{{username}}</text>
					</view>
					<view class="margin-top-sm">每日有惊喜，精彩福利领不停</view>
				</view>
		
			</view>
		</view>
		<view class="card-item flex bg-white radius" style="">
			<view class="flex-sub text-left" style="border-right:1px solid #ccc;margin:40upx;">
				<text class="text-bold">
					<text class="lg text-blue cuIcon-card margin-right-sm"></text> 卡号
				</text>
				<view class="margin-top-sm text-black">{{username}}</view>
			</view>
			<view class="flex-sub text-left" style="margin:40upx;" @click="showModal" data-target="Image">
				<text class="text-bold">
					<text class="lg text-blue cuIcon-rechargefill margin-right-sm"></text> 余额
				</text>
				<view class="margin-top-sm text-black">
					{{balance}}
					<text class="text-gray margin-left-sm">
						瑞金
					</text>
				</view>
			</view>
		</view>
		<view class="card-item" style="padding-bottom:30px;">
			<view class="cu-bar bg-white">
				<view class="content text-bold text-black">
					精彩好券
				</view>
			</view>
			<view class="card-item-content uni-flex uni-row">
				<navigator  v-for="(item, index) in type" :key="index" :url="'/pages/index/list?id='+item.pid+'&url='+item.url">
				<view class="list-item">
					<view class="list-item-box" :style="{backgroundImage: 'url('+ item.url +')'}" style="background-size: contain;">
						<text class="text-bold text-black">
										{{item.name}}专享兑换券
						</text>
						<!-- <view class="margin-top-sm">可领8张优惠券</view> -->
					</view>
				</view>
				</navigator>
			</view>		
		</view>
		<view class="cu-modal" :class="modalName=='Image'?'show':''">
			<view class="cu-dialog">
					<view class="cu-bar justify-end text-white">
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close "></text>
						</view>
					</view>
					<canvas  canvas-id="qrcode" style="width: 215px;height: 215px;margin-left:20%;" />
					<view class="mainTitle">
						请出示此码给商家进行兑换
					</view>
	
			</view>
		</view>
		<!-- <div class="cu-modal" :class="modalName=='Image'?'show':''">
		
		<view class="cu-bar justify-end text-white">
			<view class="action" @tap="hideModal">
				<text class="cuIcon-close "></text>
			</view>
		</view>
		</div> -->
	</view>

</template>

<script>
	var api = require('../../api/api.js');
	import uQRCode from '@/js/uqrcode.js'
	export default {
		data() {
			return {
				username:'',
				userid:'',
				balance:'',
				type:[],
				codes:'',
				modalName:null
				 
			}
		},
		onLoad(options) {
			this.Price();
			 setTimeout(function () {
			            console.log('start pulldown');
			        }, 1000);
			        //uni.startPullDownRefresh();
			        uni.startPullDownRefresh({
			            success:function(res){
			                console.log(res);  //success 返回参数说明
			            }
			        });  //这里
			
			
		},
		onPullDownRefresh() {
		        //监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		        console.log('refresh');
		        setTimeout(function () {
		            uni.stopPullDownRefresh();  //停止下拉刷新动画
		        }, 10);
		    },
		

		mounted() {
			this.Price();
			this.isLogin();
			this.make();	
			
		},
		methods: {
			isLogin(){
			//判断缓存中是否登录过，直接登录
				try {
					const username = uni.getStorageSync('username');
					const userid = uni.getStorageSync('userid');
					const balance = uni.getStorageSync('balance');
					const type = uni.getStorageSync('type');
					if (userid) {
						this.userid = userid;
						this.username = username;
						this.balance = balance;
						this.type = type;
						console.log(type)
					} else {
						uni.reLaunch({
							url: '/pages/index/login',
						});
					}
				} catch (e) {
					// error
				}
			},
			 make() {
			      uQRCode.make({
			        canvasId: 'qrcode',
			        componentInstance: this,
			        text: uni.getStorageSync('username')+1231241235415213453465545643765476576341324534521353245432563464536743765754,
			        size: 200,
			        backgroundColor: '#ffffff',
			        foregroundColor: '#000000',
			        fileType: 'jpg',
			        correctLevel: uQRCode.defaults.correctLevel,
			        success: res => {
			          // console.log(res)
			        }
			      });
				  // this.$router.go(0)
			    },
				showModal(e){
					this.modalName = e.currentTarget.dataset.target;
					// this.$router.go(0)
				},
				hideModal(e) {
					this.modalName = null
						location.reload()
				},
				tologin(){
					  var storage = window.localStorage;
					  storage.clear();
					  uni.navigateTo({
					  	    url: '../../pages/index/login'
					  	})
				},
				Price(){
					uni.request({
					url:api.Price,
						method: 'post',
						data: {
								username:uni.getStorageSync('username'),		
							},
							success: res => {
								console.log(res.data.data.balance)
								let userdata={							
									"balance":res.data.data.balance,		
								}
								try {
										uni.setStorageSync('balance', userdata.balance); 					
										this.balance = uni.getStorageSync('balance');
										
									} catch (e) {
										// error
									};
									 
							}
						
				})
			}
			
	}
			
	
		
}
</script>

<style lang="scss" scoped>
	$item-margin-bottom: 30upx;
	$item-margin-side: 20upx;
	$line-color: #f9f9f9;
	$border-color: #aa833e;
	page{
		background-color: #f6f6f6;
	}
	.contentbox {background:url(../../static/bg_my.png) no-repeat center top;background-size: contain;}
	.header{
		color: $uni-text-color-inverse;
		margin-bottom: $item-margin-bottom;
		position: relative;
		.img-profile{
			image{
				width: 150upx;
				height: 150upx;
				border-radius: 50%;
				vertical-align: middle;
			}
		}
		.tui{
			border-top-left-radius: 30upx;
			border-bottom-left-radius: 30upx;
			background-color:#345DFE;
			width:150upx;
			height:50upx;
			margin-left: 70%;
		}
		.tui text{
			margin-top: 10upx;
			float:right;
			font-size: 20upx;
		}
		.tui image{
			margin-top: 10upx;
			float:right;
			width:30upx;
			height: 30upx;;
		}
		.usertag{
			padding: 0 20upx;
			background-color: #cb9a5c;
			border-radius: 30upx;
			font-size: 24upx;
			margin-right: 20upx;
			border: 1px solid $border-color;
			line-height: 1.6;
		}
		.nikename{
			font-size: 30upx;
			margin-bottom: 10upx;
			.usertag{
				margin-left: 20upx;
				border:none;
				display: inline-block;
			}
		}
		.setting-btn{
			width: 60upx;
			height: 60upx;
			position: absolute;
			top: 40upx;
			right:40upx;
		}
	}
	.card-item{
		background-color: #fff;
		border-radius: 20upx;
		margin: 0 $item-margin-side $item-margin-bottom $item-margin-side;
		text-align: center;
		box-shadow:0 3px 9px rgba(0,0,0,0.2);
	}
	.userinfo image {width:150upx;height:150upx;}
	.userinfo .username {font-size:18px;font-weight:700;}
	.userinfo button {position: absolute;bottom:10px;left:25px;
	background:linear-gradient(0deg,rgba(12,98,255,1),rgba(69,151,255,1));
	box-shadow:0px 2px 2px 0px rgba(33,85,255,1);
	border-radius:15px;color:#fff;}
	.cu-bar {background:url(../../static/titleBg.png) no-repeat center center;height:19px;}
	.list-item {background:url(../../static/quanBg.png) center right no-repeat;height:76px;width:285px;border:1px dashed #ccc;margin:20px auto;}
	.list-item-box {height:76px;width:250px;padding-left:91px;background-repeat: no-repeat;text-indent:20px;text-align:center;padding-top:10px;}
#canvas{width:200px!important;height:200px!important;}
	.dialogbox {height:207px;width:207px;margin:0 auto;border:15px solid #fff;border-radius:5px;}
	.cu-dialog {background:none;}
	.cu-item {font-family:PingFang SC;font-weight:bold;}
.mainTitle {margin-top:20px;color:#fff;}
</style>

